<template>
	<view class="contain bg-[#f2f2f2]" :style="`height: ${screenHeight}px;`">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular indicator-dots autoplay :duration="500">
				<swiper-item>
					<image src="../../static/img/open.png" class="w-full"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/img/userbg.jpg" class="w-full"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/img/userbg.jpg" class="w-full"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 2 -->
		<view class="bg-white  pb-4 pt-2">
			<uv-grid :col="4" @click="goPage">
				<uv-grid-item v-for="(item,index) in baseList" :key="index">
					<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
					<text class="grid-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<!-- 3 -->
		<view class="body bg-white rounded-2xl m-3 mt-[8px] mb-[40px] p-2"  :style="`height: ${screenHeight - 230}px;`">
			<view class="font-bold mb-2">
				快速通道
			</view>
			<view class="flex  flex-wrap w-full justify-between">
				<view v-for=" item in card_list" class="small_card mt-2  rounded-lg w-[48%] flex bg-[#f6f6f6] h-[80px] items-center" @tap="join(item.url)">

					<uv-image width="40" height="40" class="ml-1 mr-2" :src="item.url" shape="circle" />

					<view class="right">
						<view class="text-sm mb-2">
							{{item.title}}
						</view>
						<view class="text-xs text-gray-400 ">
							{{item.des}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import NavBar from '@/components/NavBar.vue'
	const baseCardList = [{
		url: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '包裹预报',
		des: '一键申请集运',
		url: '/pages/prediction/prediction'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '运费估算',
		des: '快捷测算、透明优惠'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '仓库收货地址',
		des: '一键复制仓库地址'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '个人收货地址',
		des: '添加个人收货地址'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '人工客服',
		des: '在线咨询、简单方便'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '物流通知',
		des: '关注公众号获取物流'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '在线充值',
		des: '一键充值、更多优惠'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '帮助中心',
		des: '常见问题、疑难解答'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '物流查询',
		des: '物流状态实时跟踪'
	},  {
		img: 'https://cdn.uviewui.com/uview/album/1.jpg',
		title: '优惠福利',
		des: '分享好友、获取收益'
	}]
	
	const background = ref(['color1', 'color2', 'color3'])
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	const baseList = ref([{
		name: 'home',
		title: '未到仓'
	}, {
		name: 'empty-history',
		title: '已到仓'
	}, {
		name: 'red-packet',
		title: '待付款'
	}, {
		name: 'car',
		title: '待发货'
	}])
	
	const card_list = ref(baseCardList)
	
	const screenHeight = computed(() => {
		return uni.getSystemInfoSync().windowHeight
	})
	
	const changeIndicatorDots = (e) => {
		indicatorDots.value = !indicatorDots.value
	}
	const changeAutoplay = (e) => {
		autoplay.value = !autoplay.value
	}
	const intervalChange = (e) => {
		interval.value = e.target.value
	}
	const durationChange = (e) => {
		duration.value = e.target.value
	}
	const click = (name) => {
		uni.showToast({
			icon: 'none',
			title: `点击了第${name}个`
		})
	}
	const join = (url) => {
		uni.navigateTo({ url: url })
	}
	const payment = (provider) => {
		console.log(provider)
		// 订单信息
		const orderInfo = {
			appid: '应用ID',
			noncestr: '随机字符串',
			package: 'Sign=WXPay', // 固定值，以微信支付文档为主
			partnerid: '商户号',
			prepayid: '预支付交易会话ID',
			timestamp: new Date().getTime(),
			sign: '签名' // 根据签名算法生成签名
		}
		uni.requestPayment({
			provider: provider,
			orderInfo: orderInfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
			success: function(res) {
				console.log('success:' + JSON.stringify(res));
			},
			fail: function(err) {
				console.log('fail:' + JSON.stringify(err));
			}
		})
	}
	const goPage = (name) => {
		uni.showToast({
			icon: 'none',
			title: `点击了第${name}个`
		})
	}
</script>

<style lang="scss">
	.contain {
		overflow-y: auto; 
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	
	
	.navi{
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>